<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        width: 80%;
        margin: 0 auto;
        border: 0;
        padding: 0;
    }
    td{
        text-align: center;
    }
</style>

<body>
    <div>
        <h3>购物车<button onclick="history.back()">返回</button></h3>
        <table border="1">
            <thead>
                <tr>
                    <th>全选<input type="checkbox" id="qxcheck" onchange="All(this)"></th>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>商品价格<button onclick="ascending()">升序</button><button onclick="Descending()">降序</button></th>
                    <th>商品数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <p class="totalPrice"></p>
                <button onclick="delall()">删除选中</button>
            </tfoot>
        </table>
    </div>
</body>
<script>
    let tbody = document.querySelector('tbody')
    let qxcheck = document.querySelector('#qxcheck')
    let arr = JSON.parse(window.localStorage.getItem('localarr'))
    let itemarr = tbody.getElementsByClassName('item')
    let btn1arr = tbody.getElementsByClassName('btn1')
    let btn2arr = tbody.getElementsByClassName('btn2')
    function setloc(arr) {
        window.localStorage.setItem('localarr', JSON.stringify(arr))
    }
    render(arr)

    function render(arr) {
        // console.log(...arguments);
        // console.log(Array.from(arguments));
        let str = ''
        arr.forEach((item, index) => {
            str += `
                <tr>
                    <td><input type="checkbox" class='item' ${item.MarqueeStatus} onchange=fx(${index})></td>
                    <td>${index + 1}</td>
                    <td>${item.title}</td>
                    <td>${item.price}</td>
                    <td>
                        <button class='btn1' onclick=jian(${index})>-</button>${item.num}<button class='btn2' onclick=jia(${index})>+</button>
                    </td>
                    <td>${item.price * item.num}</td>
                    <td>
                        <button onclick=del(${index})>删除</button>
                    </td>
                </tr>
            `
        });
        setloc(arr)
        totalPriceData()

        tbody.innerHTML = str
    }
    function del(e) {
        //使用删除节点的方式删除  是通过传递this指向dom节点
        // e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode)

        arr.splice(e, 1)
        render(arr)
        setloc(arr)

    }
    function All(e) {

        // 遍历所有单独项，全选反选被点击后把值赋值给所有单独项实现全选反选
        for (var i = 0; i < arr.length; i++) {
            if (e.checked) {
                arr[i].MarqueeStatus = 'checked'
            } else {
                arr[i].MarqueeStatus = ' '

            }


        }
        render(arr)
    }
    // 遍历每一个单独项，为每个单独项绑定点击事件
    // for (var i = 0; i < itemarr.length; i++) {
    //     itemarr[i].onclick = function () {
    //         console.log(arr[i]);
    //         // if(arr[i].MarqueeStatus=''){
    //         //     arr[i].MarqueeStatus='checked'
    //         // }else{
    //         //     arr[i].MarqueeStatus=''
    //         // }
    //         // render(arr)
    //         // 设置统计变量
    //         var count = 0
    //         // 遍历每一个单独项，如果有其中一个被选中，统计变量加1
    //         for (var j = 0; j < itemarr.length; j++) {
    //             if (itemarr[j].checked) {
    //                 count++
    //             }
    //         }                              
    //         // 根据选中数量决定是否全选
    //         if (count === itemarr.length) {
    //             qxcheck.checked = true
    //         } else {
    //             qxcheck.checked = false
    //         }
    //     }
    // }

    function fx(e) {
        console.log(e);
        arr[e].MarqueeStatus == 'checked' ? arr[e].MarqueeStatus = ' ' : arr[e].MarqueeStatus = 'checked'
        var count = 0
        for (let i = 0; i < arr.length; i++) {
            if (
                arr[i].MarqueeStatus == 'checked'
            ) {
                count++
            }

        }
        //根据选中数量决定是否全选
        if (count === arr.length) {
            qxcheck.checked = true
        } else {
            qxcheck.checked = false
        }
        render(arr)
    }
    //加减
    function jian(index) {
        if (arr[index].num > 1) {
            arr[index].num--
            console.log(arr[index].num);
            render(arr)

        } else {
            btn1arr[index].disabled = true
            console.log(btn1arr[index]);
        }

    }
    function jia(index) {
        arr[index].num++
        render(arr)
    }
    //排序
    // 商品排序函数
    function compare(property, way) {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            if (way) {
                return value1 - value2;//升序,降序为value2 - value1
            } else {
                console.log(2);
                return value2 - value1;//升序,降序为value2 - value1
            }
        }
    }
    // 商品排序 升序
    function ascending() {
        arr.sort(compare('price', true))
        render(arr)
    }
    // 商品排序 降序
    function Descending() {
        arr.sort(compare('price', false))
        render(arr)
    }
    // 总价计算
    function totalPriceData() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          arr = JSON.parse(window.localStorage.getItem('localarr'))
        let totalPrice = document.querySelector('.totalPrice')
        let goodsAll = 0
        arr.forEach((item, index) => {
            if (item.MarqueeStatus == 'checked') {
                goodsAll += (item.num * item.price)
            }
        })
        // for (var i = 0; i < itemarr.length; i++) {
        //     let nums = 0
        //     if (itemarr[i].checked) {
        //         nums = arr[i].num * arr[i].price
        //     }else{

        //     }
        //     goodsAll +=nums
        //     console.log(goodsAll);
        // }

        console.log('aa');
        totalPrice.innerText = `总价:${goodsAll}`
    }
    //删除全部
    function delall(){
        let list = arr.filter((item)=>{
            return  item.MarqueeStatus !='checked'
        })
        render(list)
    }
</script>

</html>